<template>
  <div class="home">
    <!-- 轮播图 -->
    <section class="hero-section">
      <el-carousel height="500px">
        <el-carousel-item>
          <div class="carousel-item" style="background-image: url('https://images.unsplash.com/photo-1450778869180-41d0601e046e?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80')">
            <div class="carousel-caption">
              <h2>为流浪宠物寻找一个温暖的家</h2>
              <p>每一次领养，都是给一个生命新的希望</p>
              <router-link to="/pets">
                <el-button type="primary" size="large">立即领养</el-button>
              </router-link>
            </div>
          </div>
        </el-carousel-item>
        <el-carousel-item>
          <div class="carousel-item" style="background-image: url('https://images.unsplash.com/photo-1425082661705-1834bfd09dca?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1355&q=80')">
            <div class="carousel-caption">
              <h2>找到你的完美伙伴</h2>
              <p>各种品种、年龄和性格的宠物等待您的关爱</p>
              <router-link to="/pets">
                <el-button type="primary" size="large">查看宠物</el-button>
              </router-link>
            </div>
          </div>
        </el-carousel-item>
        <el-carousel-item>
          <div class="carousel-item" style="background-image: url('https://images.unsplash.com/photo-1514888286974-6c03e2ca1dba?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1327&q=80')">
            <div class="carousel-caption">
              <h2>帮助我们拯救更多生命</h2>
              <p>通过领养代替购买，为动物保护事业贡献一份力量</p>
              <el-button 
                type="primary" 
                size="large" 
                @click="isLoggedIn ? goToPets() : goToRegister()"
              >
                {{ isLoggedIn ? '挑选宠物' : '立即注册' }}
              </el-button>
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>
    </section>

    <!-- 领养流程 -->
    <section class="process-section">
      <div class="container">
        <h2 class="section-title text-center">领养流程</h2>
        <div class="process-steps">
          <div class="process-step">
            <div class="step-icon">
              <i class="el-icon-search"></i>
            </div>
            <h3>寻找宠物</h3>
            <p>浏览我们的宠物列表，寻找适合您的伴侣</p>
          </div>
          <div class="process-step">
            <div class="step-icon">
              <i class="el-icon-document"></i>
            </div>
            <h3>提交申请</h3>
            <p>填写领养申请表，告诉我们关于您的情况</p>
          </div>
          <div class="process-step">
            <div class="step-icon">
              <i class="el-icon-chat-dot-round"></i>
            </div>
            <h3>审核批准</h3>
            <p>我们会审核您的申请并与您联系</p>
          </div>
          <div class="process-step">
            <div class="step-icon">
              <i class="el-icon-house"></i>
            </div>
            <h3>带回家</h3>
            <p>申请通过后，您可以带宠物回家了</p>
          </div>
        </div>
      </div>
    </section>

    <!-- 最新宠物 -->
    <section class="latest-pets-section">
      <div class="container">
        <h2 class="section-title text-center">最新加入的宠物</h2>
        <div v-if="isLoading" class="text-center">
          <el-skeleton :rows="3" animated />
        </div>
        <div v-else-if="latestPets.length === 0" class="text-center">
          <p>暂无可领养宠物</p>
        </div>
        <div v-else class="pet-grid">
          <pet-card v-for="pet in latestPets" :key="pet.id" :pet="pet" />
        </div>
        <div class="text-center mt-4">
          <router-link to="/pets">
            <el-button type="primary">查看更多宠物</el-button>
          </router-link>
        </div>
      </div>
    </section>

    <!-- 分类导航 -->
    <section class="categories-section">
      <div class="container">
        <h2 class="section-title text-center">宠物类别</h2>
        <div class="categories-container">
          <router-link 
            v-for="category in categories" 
            :key="category.id" 
            :to="`/pets?category_id=${category.id}`"
            class="category-item"
          >
            <div class="category-icon">
              <i :class="getCategoryIcon(category.name)"></i>
            </div>
            <h3>{{ category.name }}</h3>
            <p>{{ category.description }}</p>
          </router-link>
        </div>
      </div>
    </section>

    <!-- 成功故事 -->
    <section class="success-section">
      <div class="container">
        <h2 class="section-title text-center">成功故事</h2>
        <div class="success-container">
          <div class="success-story">
            <img src="https://images.unsplash.com/photo-1544568100-847a948585b9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=967&q=80" alt="成功故事">
            <div class="story-content">
              <h3>"旺财找到了新家"</h3>
              <p>"旺财是一只被遗弃的金毛犬，在流浪两个月后被我们救助。现在，他有了一个爱他的家庭，每天都充满欢乐。"</p>
              <p class="story-author">- 李先生, 北京</p>
            </div>
          </div>
          <div class="success-story">
            <img src="https://images.unsplash.com/photo-1526336024174-e58f5cdd8e13?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=934&q=80" alt="成功故事">
            <div class="story-content">
              <h3>"小咪改变了我的生活"</h3>
              <p>"领养小咪是我做过的最好的决定之一。她不仅是一只可爱的猫咪，更是我生活中的重要伙伴，给我的生活带来了无尽的欢乐。"</p>
              <p class="story-author">- 张女士, 上海</p>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 联系我们 -->
    <section class="contact-section">
      <div class="container">
        <h2 class="section-title text-center">联系我们</h2>
        <div class="contact-container">
          <div class="contact-info">
            <h3>有任何问题或建议?</h3>
            <p>我们随时欢迎您的联系。无论是关于领养流程的疑问，还是对我们工作的建议，都可以通过以下方式与我们取得联系。</p>
            <ul class="contact-list">
              <li><i class="el-icon-location"></i> 地址：中国某省某市某区某街123号</li>
              <li><i class="el-icon-phone"></i> 电话：+86 123 4567 8901</li>
              <li><i class="el-icon-message"></i> 邮箱：contact@petadoption.com</li>
            </ul>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
import PetCard from '@/components/pets/PetCard.vue'

export default {
  name: 'Home',
  components: {
    PetCard
  },
  data() {
    return {
      latestPets: []
    }
  },
  computed: {
    ...mapGetters({
      isLoading: 'isLoading',
      categories: 'categories/allCategories',
      isLoggedIn: 'auth/isAuthenticated'
    })
  },
  async created() {
    await this.fetchCategories()
    await this.fetchLatestPets()
  },
  methods: {
    ...mapActions({
      fetchCategoriesAction: 'categories/fetchCategories',
      fetchPetsAction: 'pets/fetchPets'
    }),
    async fetchCategories() {
      await this.fetchCategoriesAction()
    },
    async fetchLatestPets() {
      try {
        // 设置过滤条件，只获取未领养的宠物
        await this.$store.dispatch('pets/setFilters', { is_adopted: false })
        
        // 获取最新的8个宠物
        const result = await this.$store.dispatch('pets/fetchPets')
        this.latestPets = result.slice(0, 8)
      } catch (error) {
        console.error('Failed to fetch latest pets:', error)
      }
    },
    getCategoryIcon(name) {
      const icons = {
        'Dog': 'el-icon-cherry',
        'Cat': 'el-icon-grape',
        'Bird': 'el-icon-watermelon',
        'Small & Furry': 'el-icon-apple',
        'Reptile': 'el-icon-pear'
      }
      return icons[name] || 'el-icon-present'
    },
    goToRegister(event) {
      // 阻止可能的默认行为
      if (event) {
        event.preventDefault()
      }
      
      // 添加try-catch来捕获任何可能的错误
      try {
        // 使用setTimeout延迟导航，让浏览器有时间完成ResizeObserver循环
        setTimeout(() => {
          // 优先使用Vue Router的导航方法
          this.$router.push('/register').catch(err => {
            if (err.name !== 'NavigationDuplicated') {
              // 如果不是重复导航错误，则使用传统方法
              window.location.href = '/register'
            }
          })
        }, 50)
      } catch (error) {
        console.error('导航错误:', error)
        // 备用方案
        window.location.href = '/register'
      }
    },
    goToPets() {
      this.$router.push('/pets')
    },
    navigateTo(path) {
      this.$router.push(path)
    }
  }
}
</script>

<style lang="scss" scoped>
.home {
  margin-top: -20px;
}

.hero-section {
  margin-bottom: 40px;
}

.carousel-item {
  height: 100%;
  background-size: cover;
  background-position: center;
  position: relative;
  
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
  }
}

.carousel-caption {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  text-align: center;
  width: 80%;
  max-width: 800px;
  
  h2 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
  }
  
  p {
    font-size: 1.3rem;
    margin-bottom: 2rem;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
  }
}

.section-title {
  font-size: 2rem;
  margin-bottom: 2rem;
  color: var(--secondary-color);
  position: relative;
  display: inline-block;
  
  &:after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background-color: var(--primary-color);
  }
}

.process-section {
  padding: 60px 0;
  background-color: #f9f9f9;
}

.process-steps {
  display: flex;
  justify-content: space-between;
  margin-top: 30px;
  flex-wrap: wrap;
}

.process-step {
  flex: 1;
  min-width: 200px;
  margin: 10px;
  text-align: center;
  padding: 20px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  
  h3 {
    margin: 15px 0;
    color: var(--secondary-color);
  }
  
  p {
    color: var(--gray-color);
  }
}

.step-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 70px;
  background-color: var(--primary-color);
  color: white;
  border-radius: 50%;
  font-size: 30px;
  margin-bottom: 15px;
}

.latest-pets-section {
  padding: 60px 0;
}

.categories-section {
  padding: 60px 0;
  background-color: #f9f9f9;
}

.categories-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  margin-top: 30px;
}

.category-item {
  flex: 1;
  min-width: 200px;
  max-width: 300px;
  text-align: center;
  padding: 30px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  color: var(--text-color);
  
  &:hover {
    transform: translateY(-10px);
    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.15);
  }
  
  h3 {
    margin: 15px 0;
    color: var(--secondary-color);
  }
  
  p {
    color: var(--gray-color);
  }
}

.category-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  background-color: var(--primary-color);
  color: white;
  border-radius: 50%;
  font-size: 40px;
  margin-bottom: 15px;
}

.success-section {
  padding: 60px 0;
}

.success-container {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  margin-top: 30px;
}

.success-story {
  flex: 1;
  min-width: 300px;
  display: flex;
  background-color: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  
  img {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: 8px 0 0 8px;
  }
}

.story-content {
  padding: 15px;
  
  h3 {
    margin-top: 0;
    color: var(--secondary-color);
  }
  
  p {
    color: var(--gray-color);
  }
  
  .story-author {
    font-style: italic;
    margin-top: 10px;
  }
}

.contact-section {
  padding: 40px 0;
  background-color: #f8f9fa;
  text-align: center;
}

.contact-container {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  margin-top: 30px;
}

.contact-info {
  margin-top: 20px;
  
  p {
    margin: 10px 0;
    
    i {
      margin-right: 10px;
      color: var(--primary-color);
    }
  }
}

.contact-list {
  list-style: none;
  padding: 0;
  
  li {
    margin-bottom: 15px;
    display: flex;
    align-items: flex-start;
    
    i {
      margin-right: 10px;
      margin-top: 4px;
      color: var(--primary-color);
    }
  }
}

@media (max-width: 768px) {
  .carousel-caption {
    h2 {
      font-size: 1.8rem;
    }
    
    p {
      font-size: 1rem;
    }
  }
  
  .process-steps {
    flex-direction: column;
  }
  
  .success-story {
    flex-direction: column;
    
    img {
      width: 100%;
      height: 200px;
      border-radius: 8px 8px 0 0;
    }
  }
}
</style> 